<!--
 * @Author: 嗷嗷呟 2791877973@qq.com
 * @Date: 2024-01-04 20:36:04
 * @LastEditors: 嗷嗷呟 2791877973@qq.com
 * @LastEditTime: 2024-01-05 00:33:17
 * @FilePath: \shixuan1_2\waigua-split-jujube-group\src\views\Workbench\index.vue
 * @Desrciption: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<srcipt>

</srcipt>

<template>
  <div class="databoard-container">
    <div class="left">
      <el-card shadow="always" style="height: 20%;">
        <p style="">园区数据</p>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-card shadow="hover">
              年度累计收费（元）<p></p>{{ su.annualIncome }}
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              入驻企业总数<p></p>{{ su.enterpriseTotal }}
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              月卡车辆总数（辆）<p></p>{{ su.monthCardTotal }}
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              一体杆总数（台） <p></p>{{ su.chargePoleTotal }}
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="always" style="height: 60%; margin-top: 20px;">
        <p class="wrapper-head">年度收入统计</p>
        <div ref="botm1">
        </div>
      </el-card>
      <el-card shadow="always" style="height: 30%; margin-top: 20px;">
        <p class="wrapper-head">临期合同提醒</p>
        <el-table :data="list" style=" width: 100%">
          <!-- 序号列 -->
          <el-table-column type="index" label="序号" />
          <!-- 楼宇名称列 -->
          <el-table-column label="企业名称" prop="areaName" />
          <!-- 层数列 -->
          <el-table-column label="租凭楼宇" prop="spaceNumber" />
          <!-- 在管面积列 -->
          <el-table-column label="租凭时间" prop="areaProportion" />
          <!-- 关联计费规则列 -->
          <!-- 操作列 -->
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="right">
      <el-card shadow="always" style="height: 20%;">
        <p class="wrapper-head">快捷入口</p>
        <el-row :gutter="20">
          <el-col :span="6">
            <img src="@/assets/add-enterprise.png"><br>
            <span class="item-span" @click="$router.push('/exterpriseAdd')" style="cursor: pointer;">添加企业</span>
          </el-col>
          <el-col :span="6">
            <img src="@/assets/employee-manage.png" @click="$router.push('/sys/user')" style="cursor: pointer;"><br>
            <span class="item-span">员工管理</span>
          </el-col>
          <el-col :span="6">
            <img src="@/assets/add-bill.png" @click="$router.push('/propety')" style="cursor: pointer;"><br>
            <span class="item-span">添加账单</span>
          </el-col>
          <el-col :span="6">
            <img src="@/assets/data-screen.png" style="cursor: pointer;"><br>
            <span class="item-span"><a href="https://fe-hmzs.itheima.net/bigscreen/home">数据大屏</a></span>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="always" style="height: 60%; margin-top: 20px; text-align: center;">
        <p class="wrapper-head">设备告警派单</p>
        <img src="@/assets/tu.png" style="height: 80%;width: 80%;">
        <div style="text-align: center;">
          <el-button style="width: 200px;" round="20px" type="primary" @click="$router.push('/pole/info')">更多</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import router from '@/router';
import { wordAPI } from '@/api/word'
import {
  Column
} from '@antv/g2plot';
export default {
  data() {
    return {
      su: {},
    }
  },
  methods: {
    loadBotm1() {
      const data = [{
        type: '1-3秒',
        value: 0.16
      },
      {
        type: '4-10秒',
        value: 0.125
      },
      {
        type: '11-30秒',
        value: 0.24
      },
      {
        type: '31-60秒',
        value: 0.19
      },
      {
        type: '1-3分',
        value: 0.22
      },
      {
        type: '3-10分',
        value: 0.05
      },
      {
        type: '10-30分',
        value: 0.01
      },
      {
        type: '30+分',
        value: 0.015
      },
      ];

      const paletteSemanticRed = '#F4664A';
      const brandColor = '#5B8FF9';
      const columnPlot = new Column(this.$refs.botm1, {
        data,
        xField: 'type',
        yField: 'value',
        seriesField: 'value',
        yAxis: {
          label: {
            style: {
              fill: 'red',
            },
          },
          grid: {
            line: {
              style: {
                stroke: '#27DFE5',
                lineWidth: 1,
              }
            }
          }
        },
        xAxis: {
          label: {
            style: {
              fill: '#27DFE5'
            }
          }
        },
        color: ({
          value
        }) => {
          if (value < 0.05) {
            return paletteSemanticRed;
          }
          return brandColor;
        },
        legend: false,
      });

      columnPlot.render();
      setInterval(() => {
        columnPlot.changeData(data.map((d) => ({
          ...d,
          value: d.value * Math.random()
        })));
      }, 1200);

    }
  },
  mounted() {
    this.loadBotm1();
    wordAPI().then((res) => {
      this.su = res.data
    })
  }
};

</script>

<style scoped lang="scss">
.databoard-container {
  padding: 0;
  background: var(--layout-background-color);
  display: flex;
}

.databoard-container .left {
  flex-basis: 70%;
  margin-right: 20px;
}

.databoard-container .right {
  flex-basis: calc(30% - 20px);
}

.left .el-card {
  // text-align: center;
  font-size: small;
}

.right .el-col {
  text-align: center;
}

.right img {
  height: 33px;
  width: 33px;
}

.right span {
  font-size: 12px;
}
</style>
